<template>
  <div class="navbar">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" style="margin-left: 220px" @click="toHome">
        首页
      </el-menu-item>
      <el-menu-item index="2" style="margin-left: 100px">
        高校招生信息系统
      </el-menu-item>
      <el-submenu index="2" style="float: right; margin-right: 100px">
        <template slot="title">{{ this.$store.state.user.username }}</template>
        <el-menu-item @click="toLogin" v-if="!this.$store.state.user.isLogin">
          登录
        </el-menu-item>
        <el-menu-item
          @click="toRegister"
          v-if="!this.$store.state.user.isLogin"
        >
          注册
        </el-menu-item>
        <el-menu-item
          v-if="this.$store.state.user.isLogin"
          @click="toPersonalInfoView"
        >
          个人信息管理
        </el-menu-item>
        <el-menu-item @click="logOut" v-if="this.$store.state.user.isLogin"
          >退出登录</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    handleSelect(a, b) {
      // console.log(a, b);
    },
    // 退出登录
    logOut() {
      this.$store.commit("logOut");
      if (this.$route.path != "/home") {
        this.$router.push("/home");
      }
    },
    toPersonalInfoView() {
      let outer = this;
      this.$store.dispatch("getInfo", {
        success() {},
        error(resp) {
          outer.$message({
            type: "error",
            message: "获取信息失败",
          });
        },
      });

      if (this.$route.path != "/user/personal/info") {
        this.$router.push("/user/personal/info");
      }
    },
  },
  mixins: ["toLogin", "toRegister", "toHome"],
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbar {
  margin-top: 3vh;
}
</style>
